<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            font-family:Roboto,sans-serif;
            color:#363e4f;


        }
        .data-label{
            display:inline-block;
            width:160px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <strong class="data-label">A</strong>
        </p>
        <input type="text" name="" id="" v-model="a">

        <p>
            <strong class="data-label">B</strong>
        </p>
        <input type="text" name="" id="" v-model="b">

        <p><strong class="data-label">C=A*2+2</strong>{{ c }}</p>
        <p><strong class="data-label">D=A+B*2</strong>{{ d }}</p>
        <p><strong class="data-label">E=B/2</strong>{{ e }}</p>
        <p><strong class="data-label">F=C+D</strong>{{ f }}</p>
        <p><strong class="data-label">G=D-E</strong>{{ g }}</p>
    </div>
    <script type="text/javaScript"  charset="UTF-8" src="../JS文件/vue.js"></script>
    <script language="javaScript">

        let vm = new Vue({
            el:'#app',
            data () {
                return {
                    a:3,
                    b:4

                }
            },

            computed:{
                c (){
                    return this.a*2+2
                },
                d (){
                    return Number(this.a)+this.b*2
                },
                e (){
                    return this.b/2
                },
                f (){
                    return Number(this.c)+Number(this.d)
                },
                g (){
                    return this.d-this.e
                }
            }

        })
    </script>
</body>
</html>